<template>
  <div>
    <a
      href="javascript:;"
      :class="{ active: $store.state.filter === 'all' }"
      @click="setFilter('all')"
      >All</a
    >
    <a
      href="javascript:;"
      :class="{ active: $store.state.filter === 'finished' }"
      @click="setFilter('finished')"
      >Finished</a
    >
    <a
      href="javascript:;"
      :class="{ active: $store.state.filter === 'unfinished' }"
      @click="setFilter('unfinished')"
      >Unfinished</a
    >
  </div>
</template>

<script setup>
//获取store
import { useStore } from '@/my-vuex';

const store = useStore();

const setFilter = (filter) => {
  //直接在组件中调用mutation里定义的方法
  store.commit('setFilter', filter);
};
</script>

<style lang="scss" scoped>
a {
  padding-right: 15px;

  &.active {
    text-decoration: none;
    color: #000;
  }
}
</style>
